<template>
  <div class="app-container">

    <el-row :gutter="20" class="header">
      <el-col :span="5">
        <el-input placeholder="请输入名称" v-model="queryForm.query" clearable @clear="initUserList"></el-input>
      </el-col>
      <el-col :span="19">
      <el-button type="primary" :icon="Search" @click="initUserList">查询</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData" :show-overflow-tooltip="true" border style="width: 100%">
      <el-table-column prop="name" label="名称"   align="center"/>
      <el-table-column prop="create_time" label="创建时间"  align="center"/>

      <el-table-column prop="action" label="操作" width="200px" fixed="right" align="center">
        <template v-slot="scope">
          <el-button type="primary"  @click="handleYamlDialogValue(scope.row.name)">YAML</el-button>
          <el-popconfirm title="您确定要删除这条记录吗？"
             @confirm="handleDelete(scope.row.name)">
            <template #reference>
              <el-button type="danger" >删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
        v-model:current-page="queryForm.pageNum"
        v-model:page-size="queryForm.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

    <yamlClusterroleDialog v-model="yamlClusterroleDialogVisible" :resource_name="resource_name" :resource="resource"
    :yamlClusterroleDialogVisible="yamlClusterroleDialogVisible" @initUserList="initUserList">
    </yamlClusterroleDialog>
</template>

<script setup>
import requestUtil,{getServerUrl} from '@/util/request'
import {Search, Delete, DocumentAdd, Edit, Tools, RefreshRight} from '@element-plus/icons-vue'
import {ref} from "vue";
import {ElMessage} from 'element-plus'
import yamlClusterroleDialog from './components/clusterrole/yamlClusterroleDialog'


const tableData=ref([])
const total=ref(0)
const queryForm=ref({
  query:'',
  pageNum:1,
  pageSize:10
})

const resource_name = ref('')
const resource = ref('')
const yamlClusterroleDialogVisible = ref(false)

const handleYamlDialogValue = (name) => {
  resource_name.value = name;
  resource.value = 'clusterrole';
  yamlClusterroleDialogVisible.value = true
}

const handleDelete = async (name) => {
  let res = await requestUtil.del("rbac/clusterrole_api", {name:name})
  if (res.data.code === 200) {
    ElMessage({
      type: 'success',
      message: res.data.msg,
    })
    initUserList();
  } else {
    ElMessage({
      type: 'error',
      message: res.data.msg,
    })
  }
}

const initUserList=async ()=>{
  const res=await requestUtil.get("rbac/clusterrole_api",queryForm.value)
  tableData.value=res.data.data
  total.value=res.data.count
}


const handleSizeChange=(pageSize)=>{
  queryForm.value.pageSize=pageSize
  queryForm.value.pageNum=1
  initUserList()
}

const handleCurrentChange=(pageNum)=>{
  queryForm.value.pageNum=pageNum
  initUserList()
}

initUserList()

</script>

<style lang="scss" scoped>

.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}

.el-pagination {
  float: right;
  padding: 20px;
  box-sizing: border-box;
}

::v-deep th.el-table__cell {
  word-break: break-word;
  background-color: #f8f8f9 !important;
  color: #515a6e;
  height: 40px;
  font-size: 13px;

}

.el-tag--small {
  margin-left: 5px;
}
</style>
